<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务账单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">财务账单</h1>
                <i class="fas fa-download text-lg"></i>
            </div>
        </div>

        <!-- Date Filter -->
        <div class="px-4 py-3 bg-white border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div class="flex space-x-2">
                    <button class="bg-pink-500 text-white text-xs px-3 py-2 rounded-lg">本月</button>
                    <button class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg">上月</button>
                    <button class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg">本年</button>
                </div>
                <button class="text-pink-600 text-sm">
                    <i class="fas fa-calendar-alt mr-1"></i>自定义
                </button>
            </div>
        </div>

        <!-- Bill Summary -->
        <div class="px-4 py-3 bg-gradient-to-r from-pink-50 to-rose-50">
            <div class="grid grid-cols-3 gap-3 text-center">
                <div class="bg-white rounded-lg p-3 shadow-sm">
                    <p class="text-xl font-bold text-green-600">¥286,580</p>
                    <p class="text-xs text-gray-600">总收入</p>
                </div>
                <div class="bg-white rounded-lg p-3 shadow-sm">
                    <p class="text-xl font-bold text-red-600">¥45,320</p>
                    <p class="text-xs text-gray-600">总支出</p>
                </div>
                <div class="bg-white rounded-lg p-3 shadow-sm">
                    <p class="text-xl font-bold text-blue-600">¥241,260</p>
                    <p class="text-xs text-gray-600">净收益</p>
                </div>
            </div>
        </div>

        <!-- Bill List -->
        <div class="h-[calc(852px-300px)] overflow-y-auto pb-24">
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-pink-600 mr-2 rounded-full"></span>
                    账单明细
                </h3>
                
                <!-- Daily Bill Group -->
                <div class="mb-4">
                    <div class="flex items-center justify-between mb-2">
                        <p class="text-sm font-medium text-gray-700">2025年01月05日</p>
                        <p class="text-sm text-green-600">净收入 +¥12,580</p>
                    </div>
                    <div class="space-y-2">
                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-arrow-down text-green-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">订单收入</p>
                                        <p class="text-xs text-gray-500">订单号: 202501050156</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-green-600">+¥1,298</p>
                                    <p class="text-xs text-gray-400">10:32</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-arrow-up text-red-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">平台佣金</p>
                                        <p class="text-xs text-gray-500">费率: 3%</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-red-600">-¥38.94</p>
                                    <p class="text-xs text-gray-400">10:32</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-arrow-down text-green-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">订单收入</p>
                                        <p class="text-xs text-gray-500">订单号: 202501050155</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-green-600">+¥598</p>
                                    <p class="text-xs text-gray-400">09:45</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Another Day -->
                <div class="mb-4">
                    <div class="flex items-center justify-between mb-2">
                        <p class="text-sm font-medium text-gray-700">2025年01月04日</p>
                        <p class="text-sm text-blue-600">净收入 +¥8,750</p>
                    </div>
                    <div class="space-y-2">
                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-money-check-alt text-blue-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">提现</p>
                                        <p class="text-xs text-gray-500">到账: 工商银行尾号8866</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-blue-600">¥10,000</p>
                                    <p class="text-xs text-gray-400">15:30</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-credit-card text-red-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">提现手续费</p>
                                        <p class="text-xs text-gray-500">提现服务费</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-red-600">-¥2</p>
                                    <p class="text-xs text-gray-400">15:30</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-shopping-cart text-green-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">销售收入</p>
                                        <p class="text-xs text-gray-500">23笔订单</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-green-600">+¥18,752</p>
                                    <p class="text-xs text-gray-400">全天</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Export Button -->
                <div class="mt-6">
                    <button onclick="exportBill()" class="w-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-medium py-3 rounded-lg shadow-sm">
                        <i class="fas fa-download mr-2"></i>导出账单
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function exportBill() {
            alert('账单导出功能\n支持格式: PDF、Excel\n已发送到您的邮箱');
        }

        // 日期筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            const dateButtons = document.querySelectorAll('.flex.space-x-2 button');
            dateButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除其他按钮的激活状态
                    dateButtons.forEach(btn => {
                        btn.classList.remove('bg-pink-500', 'text-white');
                        btn.classList.add('bg-gray-100', 'text-gray-600');
                    });
                    
                    // 激活当前按钮
                    this.classList.remove('bg-gray-100', 'text-gray-600');
                    this.classList.add('bg-pink-500', 'text-white');
                });
            });
        });
    </script>
</body>
</html>